<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/28
  Time: 10:30
  To change this template use File | Settings | File Templates.

  JSP:  全称  Java  Server Page
        就是HTML页面和java代码组合在一起的页面。
        在JSP中如果编写JAVA代码。

          java代码都是编写在  <%     %>  之间的
<%
    Date d = new Date();

    String str="asdasdas";

%>
  --%>

<!--展示书籍的首页-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

</head>
<body>
<!--如何在JSP页面中获得Servlet中传递的值。-->
<%--

<%=url%>   -=>>out.write(url);
--%>
当前在线人数为：${applicationScope.countNums}。

<div>
    <c:choose>
        <c:when test="${empty sessionScope.loginUser}">
                <a href="${pageContext.request.contextPath}/html/login.jsp">登录</a>   注册
        </c:when>
        <c:otherwise>
            欢迎${sessionScope.loginUser.nickname} 进入系统。   <a href="${pageContext.request.contextPath}/isLogin/ShoppingCart.jsp">购物车</a>   个人中心
            <a href="${pageContext.request.contextPath}/html/logout.jsp">退出</a>
        </c:otherwise>
    </c:choose>


</div>
<div style="margin: 0px auto;width: 1000px">

    <c:forEach items="${page.list}" var="product" varStatus="s">
        <div id="${product.id}" class="bookInfo"  style="width:200px;height: 200px;border: 1px solid lavender;float:left;<c:if test="${s.index %4 ==0}">;clear :left</c:if>;margin: 10px">
            <div class="bookImg" style="width:100%;height:170px;background-image: url('/MyBooks${product.produceImgUrl}');background-size: 100% 100%;"></div>
            <div class="info" style="width:100%;height: 30px;font-size: 10px">书籍的名称：${product.productName}<br/>价格:<span style="color: red;font-size: 14px">${product.price}</span></div>
        </div>
    </c:forEach>

</div>
<div>

    <c:if test="${page.pageNo > 1}">
        <a HREF="http://localhost/MyBooks/bookServlet?methodName=getBookList">首页</a>
        <a HREF="http://localhost/MyBooks/bookServlet?methodName=getBookList&pageNo=${page.pageNo -1}">上一页</a>
    </c:if>

<c:if test="${page.pageNo < page.totalPageNum}">
    <a HREF="http://localhost/MyBooks/bookServlet?methodName=getBookList&pageNo=${page.pageNo +1}">下一页</a>
    <a HREF="http://localhost/MyBooks/bookServlet?methodName=getBookList&pageNo=${page.totalPageNum}">末页</a></div>
</c:if>
<script type="text/javascript">
    
    window.onload =function () {
        //获得所有class属性为bookInfo的div对象
        var bookInfoArry = document.querySelectorAll(".bookInfo");
        //querySelectorAll  获得多个    querySelector  只获得一个

        //遍历每个class值为bookInfo 的div并绑定事件
        for(var i=0;i<  bookInfoArry.length;i++){
            bookInfoArry[i].onclick = function () {
                window.location.href="${pageContext.request.contextPath}/bookServlet?id="+this.id +"&methodName=bookInfo"
            }


         }
    }

    
    
</script>
</body>
</html>
